<template>
  <div class="layout">
    <Layout style="height: 100%">
      <!-- <Sider
        ref="side1"
        hide-trigger
        collapsible
        :collapsed-width="78"
        v-model="isCollapsed"
      >
        <yn-menu
          style="height: 100%"
          :menuList="menuList"
          :menuRoot="menuRoot"
          :currentPaths="currentPaths"
          :placeHoldImg="placeHoldImg"
          @menuClick="handleChange"
        ></yn-menu>
     
      </Sider> -->
      <Layout>
        <Header :style="{ padding: 0 }" class="layout-header-bar">
          <!-- <Icon
            @click.native="collapsedSider"
            :class="rotateIcon"
            :style="{ margin: '0 20px' }"
            type="md-menu"
            size="24"
          >
          </Icon> -->
          <!-- <MenuTop></MenuTop> -->
          <yn-header
            :user="user"
            :placeHoldImg="placeHoldImg"
            :homeImg="homeImg"
          ></yn-header>
        </Header>
        <Content :style="{ height: '100%' }">
          <router-view
            :style="{ background: '#fff', height: '100%', overflowY: 'scroll' }"
          ></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
// import SideMenu from '@/components/Menu/menu.vue';
// import MenuTop from '@/components/Menu/menuTop.vue';

export default {
  // components: {
  //   SideMenu,
  //   MenuTop,
  //   // SideContent,
  // },
  data() {
    return {
      isCollapsed: false,
      placeHoldImg:
        'this.src="' + require("@/assets/images/main/master/jcyy.png") + '"',
      homeImg: require("@/assets/images/main/master/home.png"),
    };
  },
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    menuitemClasses() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
    user() {
      return this.$store.state.user;
    },
    menuList() {
      return this.$store.state.app.menuList;
    },
    currentPaths() {
      return this.$store.state.app.currentPaths[
        this.$store.state.app.currentPaths.length - 1
      ];
    },
    menuRoot() {
      return this.$store.state.app.menuRoot;
    },
  },
  methods: {
    collapsedSider() {
      this.$refs.side1.toggleCollapse();
    },
    toNav() {
      window.location.href =
        window.location.protocol +
        "//" +
        window.location.hostname +
        "/nav.html";
    },
    handleChange(path) {
      this.$store.commit("setCurrentPaths", path);
      this.$router.push({ path: path });
    },
  },
};
</script>
<style lang="less" scoped>
.layout {
  border: 1px solid #d7dde4;
  border-left: none;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;

  .ivu-layout-sider {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  .layout-header-bar.ivu-layout-header {
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 1px 1px hsla(0, 0%, 39.2%, 0.1);
    margin-bottom: 2px;
  }
}

// 菜单栏宽度修改250px STRAT
.ivu-layout-sider-collapsed.ivu-layout-sider {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  flex: 0 0 80px !important;
}

// 菜单栏宽度修改250px END

// 菜单栏宽度修改250px END
/deep/.ivu-btn,
/deep/.ivu-input,
/deep/.ivu-select-single .ivu-select-selection .ivu-select-placeholder,
/deep/.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
  font-size: 12px;
}

// 菜单栏修改
/deep/#menu .ivu-menu-submenu-title .layout-text {
  font-size: 14px;
}

/deep/.ivu-tree ul,
/deep/.ivu-tabs-nav .ivu-tabs-tab,
/deep/.ivu-form .ivu-form-item-label {
  font-size: 12px;
}
</style>
